<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <title>动态数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>

<body>
    <div class="map-id" id="mapId"></div>
    <link rel="stylesheet" href="/CloundMap/css/dialog.css">
    <script type="text/javascript" src="/CloundMap/map/Init.js"></script>
    
    <script type="text/javascript" src="/CloundMap/js/jquery.js"></script>
    
    <script src="/CloundMap/js/dialog.js"></script>
    


    <script type="text/javascript" src="/CloundMap/map/extend/ht/core/ht.js"></script>
    <script type="text/javascript" src="/CloundMap/map/extend/ht/plugin/ht-flow.js"></script>
    <script type="text/javascript" src="/CloundMap/map/extend/ht/plugin/ht-animation.js"></script>

<!--     <script type="text/javascript" src="MapGeometryAnim.js"></script> -->

    <script type="text/javascript" src="roads2.js"></script>

    <script type="text/javascript">
            var mapConfigResult =  {
                 "mapOpts": {
                     "minZoom":6,
                     "defaultZoom": 14,
                     "maxZoom": 18,
                     "projection": "EPSG:900913",
                     "displayProjection": "EPSG:4326",
                     "restrictedExtent": [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]
                 },
                 "vectorLayer": [{
                     "layerName": "shanghaiBaseMap1",
                     "layerType": "NPMapLib.Layers.BaiduTileLayer",
                     "layerOpt": {
                         "url": ["http://api0.map.bdimg.com/customimage/tile?&x=${x}&y=${y}&z=${z}&udt=20150601&styles=t%3Aland%7Ce%3Ag%7Cc%3A%23303845%2Ct%3Awater%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Agreen%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Aadministrative%7Ce%3Al.t.s%7Cc%3A%231e232a%2Ct%3Ahighway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%7Cw%3A0.1%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23ffffff%7Cw%3A0.1%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aadministrative%7Ce%3Al.t.f%7Cc%3A%2366788f%7Cw%3A0.1%2Ct%3Alabel%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231a1f24%2Ct%3Aroad%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Asubway%7Ce%3Al.i%7Cv%3Aoff%7Cc%3A%2366788f%2Ct%3Ahighway%7Ce%3Al.i%7Cv%3Aoff","http://api1.map.bdimg.com/customimage/tile?&x=${x}&y=${y}&z=${z}&udt=20150601&styles=t%3Aland%7Ce%3Ag%7Cc%3A%23303845%2Ct%3Awater%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Agreen%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Aadministrative%7Ce%3Al.t.s%7Cc%3A%231e232a%2Ct%3Ahighway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%7Cw%3A0.1%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23ffffff%7Cw%3A0.1%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aadministrative%7Ce%3Al.t.f%7Cc%3A%2366788f%7Cw%3A0.1%2Ct%3Alabel%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231a1f24%2Ct%3Aroad%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Asubway%7Ce%3Al.i%7Cv%3Aoff%7Cc%3A%2366788f%2Ct%3Ahighway%7Ce%3Al.i%7Cv%3Aoff"
                         ],
                         "centerPoint": [108.94937966929062,34.2651289102875],
                         "fullExtent": [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892],
                         "isBaseLayer": true
                     }
                 }],
                 "sattilateLayer": []
             };



            var mapContainer = document.getElementById('mapId');
            var mapConfig = new MapPlatForm.Base.MapConfig();
            var resultJson = mapConfig.createMap(mapContainer, mapConfigResult);
            var map = resultJson.map;

            var mapGeoAnim = new MapPlatForm.Base.MapGeometryAnim(map);


            var startPoint = new NPMapLib.Geometry.Point(119.9298567102729, 31.855445258930715);
            var endPoint = new NPMapLib.Geometry.Point(119.8806686646292, 31.71298407950421);

            var pointOpts = {
                startColor: 'rgba(255,255,0,1)',
                endColor: 'rgba(255,255,0,0)',
                size: 20
            }

            function buildeLineData() {
                var mapGeometry = new MapPlatForm.Base.MapGeometry(map);
                var opts = {
                    flowCount: 1,
                    flowElementBgColor: 'rgba(255,255,0,0.6)',
                    flowElementMax: 6,
                    flowElementMin: 0,
                    flowElementCount: 40,
                    lineBorderWidth: 1,
                    lineBorderColor: 'rgba(240, 255, 114, 0.3)',
                    lineDashPattern: [16, 16],
                    lineDash3d: false
                }
                for (var i = 0; i < AllRoads.length; i++) {
                    // if(AllRoads[i].speed === 50){
                        var line = mapGeometry.getGeometryByGeoJson(AllRoads[i].geometry);
                        var points =  line.getPath();
                        var startPoint = points[0];
                        var endPoint = points[points.length-1];
                        mapGeoAnim.createAnimLine(points, opts);
                        points.reverse();
                        mapGeoAnim.createAnimLine(points, opts);
                        mapGeoAnim.createAnimPoint(startPoint, pointOpts);
                        mapGeoAnim.createAnimPoint(endPoint, pointOpts);
                    // }
                }
            }

  


    </script>

    <script type="text/javascript">
    $(function() {
        buildeLineData();
        //注册操作说明
        registerDemoInstructions({
            title: "动态数据",
            height: "50",
            width: "250",
            position: [0, 0], //["right",60],
            content:"<div id='resultDom' style='width:100%;height:100%'></div>",
            modal: false,
            buttons: {
                "启用 Flow": function() {
                     mapGeoAnim.enableFlow();
                },
                "禁用 Flow": function() {
                    mapGeoAnim.disableFlow();
                },
                "清除": function() {
                   mapGeoAnim.clear();
                },
                "加载": function() {
                    mapGeoAnim.createAnimPoint(startPoint, pointOpts);
                    mapGeoAnim.createAnimPoint(endPoint, pointOpts);
                    buildeLineData();
                    mapGeoAnim.enableFlow();
                }
            }
        });
    });
    </script>
</body>

</html>
